<template>
  <div id="login">
    <van-row>
      <van-col span="24">
        <van-nav-bar title="账号登录" left-arrow @click-left="onClickLeft" />
      </van-col>
      <van-col span="24" class="user">
        <van-form @submit="onSubmit">
          <van-field v-model="username" name="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
          <van-field v-model="password" type="password" name="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />

          <div style="margin: 16px 30px 0px 30px;">
            <van-button round block type="info" native-type="submit" style="background-color: #ab956c; border: 1px solid #ab956c;">立即登录</van-button>
          </div>
          <van-col span="24" style="margin: 16px 0px;">
            <span @click="onGoRegistered">注册账号</span>
            <span style="float: right;" @click="onGoReset">忘记密码</span>
          </van-col>
        </van-form>
      </van-col>
      <van-overlay :show="show" @click="show = false">
        <div class="wrapper" @click.stop>
          <div class="block">
            <van-loading color="#1989fa" />
          </div>
        </div>
      </van-overlay>
    </van-row>
  </div>
</template>
<script>
import { Toast } from 'vant'
export default {
  name,
  data() {
    return {
      show: false,
      username: '',
      password: ''
    }
  },
  methods: {
    onSubmit(values) {
      Toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      // this.show = true
      setTimeout(() => {
        //需要定时执行的代码
        this.$post('auth/login', { username: this.username, password: this.password })
          .then(result => {
            console.log(result)
            // 0 == 验证成功
            // 704 == 密码错误
            if (result.data.errno == 0) {
              // 创建 时间限制  当前时间加上未来时间
              let setdate = new Date().getTime() + 7200000
              Toast.success('登录成功')
              this.$router.push('/user')
              // 把当前的时间转化为
              this.$jsCookie.set('user', JSON.stringify(result.data.data), { expires: new Date(setdate) })
              this.$jsCookie.set('token', result.data.data.token, { expires: new Date(setdate) })
              // this.$jsCookie.set('username', result.data.data.userInfo.username, { expires: new Date(setdate) })
            } else {
              Toast.fail('密码错误!')
            }
            // this.show = false
          })
          .catch(err => {})
      }, 2000)
    },
    onGoRegistered() {
      // 跳转到注册页面
      this.$router.push('/Registered')
    },
    onClickLeft() {
      this.$router.back()
    },
    onGoReset() {
      this.$router.push('/Reset')
    }
  }
}
</script>
<style lang="less" scoped>
.user {
  margin-top: 1.5rem;
  padding: 0.2rem;
  .van-cell {
    border-bottom: 1px solid #ab956c;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
